<template>
    <div class="designClass">
        <el-container class="outerContent">
            <el-aside class="outerAside">
                <libSlide>
                    <template #course>
                        <div class='course'>
                            <div class='box'>
                                <div class='pic'>
                                    <img :src="bkItem.cover_url" alt='' />
                                </div>
                                <div class='text'>
                                    <h4>{{ bkItem.name }}</h4>
                                </div>
                            </div>
                        </div>
                    </template>
                </libSlide>
            </el-aside>
            <el-main>
                <div class="wrapper">
                    <el-scrollbar :native="true" height="100%">
                        <div class="pageBody">
                            <RouterView />
                        </div>
                    </el-scrollbar>
                </div>

            </el-main>
        </el-container>

    </div>
</template>

<script setup>
import { RouterView } from "vue-router";
import libSlide from "./children/LibSlide"
import { counterStore } from "@/store/modules/counter"
const store = counterStore()
const bkItem = ref(null)
bkItem.value = store.bkItem

</script>

<style lang="scss" scoped>
.outerContent {
    height: calc(100vh - 84px);

    .outerAside {
        width: 180px;
        height: 100%;
        padding: 30px 30px 0 0;
        border-right: 1px solid #eee;

    }

    .wrapper {
        background: #fff;
        overflow-x: auto;

        .pageBody {
            width: 100%;
            min-width: 1000px;
        }
    }

}


.el-aside {
    background: none;
    padding: 0;
}

.course {

    width: 100%;
    padding: 0px 0  15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #efefef;
    position: relative;
    z-index: -100;

    .pic {
        position: relative;
        width: 100%;
        height: 83px;
      
       
        img {
            width: 100%;
            border-radius: 5px;
            display: block;
        }
    }

    .text {
        text-align: center;
        padding-top: 5px;


        h4 {
            color: #222;
            font-size: 14px;
            padding-bottom: 15px;
        }

        .code {
            font-size: 15px;
            color: #999;
        }
    }
}


.route-transition-enter-active,
.route-transition-leave-active {
  transition: opacity 0.3s ease;
}

.route-transition-enter-from,
.route-transition-leave-to {
  opacity: 0;
}
</style>
